<template>
    <div class="retailers_box">
        <!-- 搜索部分 -->

        <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            :option="tableOption"
            :row-key="getRowKey"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"></ZwTable>
    </div>

    <!-- 分页 -->
</template>
<script setup lang="tsx">
import { onMounted, computed, watch, ref, reactive, toRefs, nextTick } from 'vue';
import { useStore } from '@/store';
import { storeList, sourceList, getRetailOnlinemall } from '@/api/retailOnlineRetailers/onlineRetailers';
import { getWiseManList } from '@/api/ecommerce/wiseManList';
import { getOrderState } from '@/api/ecommerce/tradingManage';
import router from '@/router';
import { deepCopy } from '@/utils/helper';
import { useRoute } from 'vue-router';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
const store = useStore();
const orderList = ref([]);
const retailList = ref([]);
const route = useRoute();
const tableRef: any = ref(null);

const props = defineProps(['source_type']);

const formData = reactive({
    shop: '',
    source: '',
    order_time: [],
    source_type: props.source_type, //订单类型 1-零售电商 2-达人订单
    daren_openid: '',
    page: 1,
    page_size: 15
});

const defaultParams = reactive({
    cust_id: route.query.id,
    shop: '',
    source: [],
    source_type: props.source_type, //订单类型 1-零售电商 2-达人订单
    order_time: []
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});

const belongOptionList = reactive([]);

const getRowKey = (row: any) => {
    return row.id;
};
const sourceVal = ref(null);
const searchOption = computed(() => {
    return [
        {
            label: '订单来源',
            name: 'source',
            value: '',
            type: 'select',
            placeholder: '请选择订单来源',
            optionList: [
                { label: '抖音达人', value: 21 },
                { label: '快手达人', value: 22 }
            ],
            async change(val: any, from: any) {
                sourceVal.value = val;
                from.daren_openid = '';
                formData.daren_openid = '';
                const daren_channel_id = sourceVal.value || '0';
                if (sourceVal.value != 0 && !sourceVal.value) {
                    belongOptionList.splice(0, belongOptionList.length);
                    return;
                }
                const data: any = await getWiseManList({
                    daren_channel_id,
                    auth_status: [2, 3],
                    page: 1,
                    page_size: 999
                });
                belongOptionList.splice(0, belongOptionList.length, ...data.data);
            }
        },
        {
            label: '归属达人',
            name: 'daren_openid',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '请选择达人',
            optionList: belongOptionList,
            formatOption: (v: any) => ({
                label: v.daren_name,
                value: v.daren_openid
            })
        },
        {
            label: '下单时间',
            name: 'order_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        },
        {
            label: '订单状态',
            name: 'status',
            value: '',
            type: 'select',
            placeholder: '请选择订单状态',
            optionList: [
                { label: '已支付', value: 2 },
                { label: '已签收', value: 4 },
                { label: '已完成', value: 5 },
                { label: '已关闭', value: 6 }
            ]
        }
    ];
});
const tableOption = [
    {
        prop: 'order_sn',
        label: '订单编号',
        width: 200
    },
    {
        prop: 'source_name',
        label: '订单来源',
        width: 120
    },
    {
        prop: 'status_name',
        label: '订单状态',
        width: 120
    },
    {
        prop: 'account',
        label: '购买账号',
        width: 200,
        showOverflowTooltip: true
    },
    {
        prop: 'account',
        label: '应付/实付金额(元)',
        width: 200,
        render({ row }) {
            return (
                <div>
                    <span>
                        ¥{row.actually_amount || row.actually_amount == 0 ? row.actually_amount : '--'}/
                        {row.cope_amount || row.cope_amount == 0 ? row.cope_amount : '--'}
                    </span>
                </div>
            );
        }
    },
    {
        prop: 'daren_name',
        label: '归属达人'
    },
    {
        prop: 'order_time',
        label: '下单时间',
        width: 180
    }
];
const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};
const fetchApi = () => {
    // 获取文件列表
    getTableH();
    return getRetailOnlinemall;
};

const search = (data: any) => {
    const res = { ...defaultParams, ...data };
    state.searchParams = deepCopy(res);
};
const reset = (v?: any) => {
    state.searchParams = deepCopy({ ...defaultParams, ...v });
};
// 来源订单
const getsourceList = async () => {
    const res = await sourceList({ dict_id: 1 });
    orderList.value = res;
};

// 初始化归属达人列表
const getBelongList = async () => {
    const data: any = await getWiseManList({
        daren_channel_id: '0',
        auth_status: [2, 3],
        page: 1,
        page_size: 999
    });
    belongOptionList.splice(0, belongOptionList.length, ...data.data);
};

// 列表
const getRetailList = async () => {
    const params = {
        cust_id: route.query.id,
        shop: formData.shop,
        source: formData.source,
        order_time: formData.order_time,
        page: formData.page,
        page_size: formData.page_size
    };
    const res = await getRetailOnlinemall(params);
    retailList.value = res.data;
    store.dispatch('pageTotal', res.total);
};
onMounted(() => {
    getsourceList();
    getBelongList();
});
</script>
<style scoped lang="scss">
.retailers_box {
    .zw-search-form {
        padding: 16px;
        margin-bottom: 16px;
        background-color: #f9f9f9;
    }
}
</style>
